Day #9 Modern Layouts

Sandbox This is where you play

Instructions: Using CSS, style the following sections to match the layouts in the "Final Result" below. Bonus points for making them responsive with Media Queries!

Modern Layout #1

This is the header

This is an article. It contains body text, such as lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Of course, we cannot forget the footer!

Modern Layout #2

This is an article. It contains body text, such as lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Of course, we cannot forget the footer!

Modern Layout #3

This is an article within a 3 column grid. It contains body text, such as lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This is an article within a 3 column grid. It contains body text, such as lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This is an article within a 3 column grid. It contains body text, such as lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Final Result Use this for reference!

Modern Layout #1

This is the header

This is an article. It contains body text, such as lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Of course, we cannot forget the footer!

Modern Layout #2

This is an article. It contains body text, such as lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Of course, we cannot forget the footer!

Modern Layout #3

This is an article within a 3 column grid. It contains body text, such as lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This is an article within a 3 column grid. It contains body text, such as lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This is an article within a 3 column grid. It contains body text, such as lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Information About this lesson

What are we making?

Fun & fancy ways to create modern layouts in CSS with floats!

Where can I use it?

In your websites and client projects to create modern and functional layouts.

How compatible are these styles with major browsers?

Check the CSS3 styles from your stylesheet on this website. It allows you to see the compatibility of every CSS style with major browser.